<template>
  <el-form :label-width="labelWidth" label-position="left">
    <el-form-item :label="$t('Name')+1">
      <el-input v-model="name1" @change="handleChange" />
    </el-form-item>
    <el-form-item :label="$t('Name')+2">
      <el-input v-model="name2" @change="handleChange" />
    </el-form-item>
    <el-form-item :label="$t('Name')+3">
      <el-input v-model="name3" @change="handleChange" />
    </el-form-item>
    <el-form-item :label="$t('FullName')">
      <el-input v-model="name" @change="handleChange">
        <!-- <el-button slot="append" type="primary" @click="handleChange">{{ $t("Confirm") }}</el-button> -->
      </el-input>
    </el-form-item>
  </el-form>
</template>
<script>
  import BaseManager from './BaseManager'
  // import deviceAPI from '@/api/device/device'
  export default {
    name: 'LightManager',
    mixins: [BaseManager],
    data() {
      return {
        name1: '1',
        name2: '2',
        name3: '3',
        name: null,
        device: {}
      }
    },
    methods: {
      setValue(value) {
        this.device = Object.assign({}, value)
        this.name = null
        this.name1 = '1'
        this.name2 = '2'
        this.name3 = '3'
        var array = value.name ? value.name.split('|') : []
        const status = array.length > 4 ? 4 : array.length
        switch (status) {
          case 0:
            break
          case 4:
            this.name = array[3]
          case 3:
            this.name3 = array[2]
          case 2:
            this.name2 = array[1]
          case 1:
            this.name1 = array[0]
        }
      },
      handleChange() {
        const name = `${this.name1}|${this.name2}|${this.name3}|${this.name}`;
        this.$emit('input', Object.assign({}, this.device, {
          name
        }))
        // const code = this.value.code
        // const vm = this
        // deviceAPI.changeName({
        //   code,
        //   name
        // }).then(() => {
        //   const value = Object.assign({}, value, {
        //     name
        //   })
        //   vm.$emit('input', value)
        //   vm.$emit('close')
        // })
      }
    }
  }

</script>
